
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
	<!-- 引入样式 -->
	<link rel="stylesheet" type="text/css" href="../css/index.css"/>
	<link rel="stylesheet" type="text/css" href="../css/style.css"/>
	<!-- 引入组件 -->
	<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="html5plus://ready"></script>	
</head>
<body>
	<div id="app">	
		<section>
			<van-row>
				<van-col span="8">
					 <van-badge-group :active-key="activeKey" @change="onChange" >
					<van-badge :title="Nr.Name" v-for="(Nr,index) in ListType" @click="dj(Nr.Id)">						
					   </van-badge>			    
					 </van-badge-group>	
				</van-col>				
				<van-col span="16">	
					<van-row>
						<van-col span="12" v-for="(Sj,index) in Nr">
							<div @click="GetId(index)">
							<div>								
								<img :src="Sj.GoodsImageUrl" onerror="javascript:this.src='../img/product_default.jpg'"  style="width:95% ;">	
							</div>
							<div>
								{{Sj.Name}}
							</div> 
							<div style="color: red;font-size:16px ;">
								￥{{Sj.MarketPrice}}
							</div>
							<div style="color: #969799; font-size: 12px;">
								{{Sj.BrowseCount}}&nbsp;销量
							</div>
							<div style="color: #969799; font-size: 12px;">
								{{Sj.VirtualSaleCount}}&nbsp;浏览
							</div>
							</div>					
						</van-col>			
				</van-row>		
				</van-col>
			</van-row>
		</section>
	</div>
</body>
 <script type="text/javascript">
    	var vm=new Vue({
			el:'#app',
			data:{
				 activeKey: 0,	
				 ListType:[],
				 Nr:[],
			},
			mounted: function() {
					//默认列表数据
					$.ajax({
						type: "post",
						url: "http://dsapi.ysd3g.com/api/Categories",
						data: {},
						dataType: "JSON",
						success: function(res) {
							console.log(res);
							vm.ListType=res.Categories;	
							
						}
					});
					$.ajax({
						type: "post",
						url: "http://dsapi.ysd3g.com/api/GoodsByCategoryId",
						data: {
							typeId: 3,
							p: 1
						},
						dataType: "JSON",
						success: function(res) {
							console.log(res);
							vm.Nr = res.Data;
						}
					});
					},
			methods: {
				GetId: function(index) {
					plus.webview.create("../commodity-details/commodity.html", "commodity", {}, {
						lisprice: vm.Nr[index].RealPrice, //商品价格
						lisname: vm.Nr[index].Name, //商品名称
						liscount: vm.Nr[index].VirtualSaleCount, //商品销量
						BrowseCount: vm.Nr[index].BrowseCount, //商品浏览量
						nId: vm.Nr[index].Id //商品id
					})
					plus.webview.show("commodity","slide-in-right");
				},
				
				onChange(key) {
					this.activeKey = key;
				},
				dj: function(key) {
					$.post("http://dsapi.ysd3g.com/api/GoodsByCategoryId", {
						typeId: key,
						p: 1
					}, function(res) {
						console.log(res);
						vm.Nr = res.Data;
					}, "JSON")
				}
					
			}					  
		})	
    </script>
</html>